<template>
  <div class="page-container">
      <!-- 数据 -->
      <div class="table-box">
        <i-table
          :table="tableConfig"
          :tableData="tableData" 
          :page-bean="pageBean"
          @pageChange="pageChange"
        >
          <template slot="searchBox">
            <div class="topsearch">
              <div class="search">
                <el-input
                  placeholder="请输入司机姓名"
                  prefix-icon="el-icon-search"
                  class="search-inp"
                  v-model="searchInp"
                  @clear="handSearch"
                  clearable
                >
                </el-input>
                <el-button type="primary" size="medium" @click="handSearch"
                  >搜索</el-button
                >
              </div>
              <el-button type="primary" size="medium" @click="addDriverBtn">新增司机</el-button>
            </div>
          </template>
          <template slot="gender" slot-scope="props">
            <span>{{props.obj.row.gender | genderTxt}}</span>
          </template>
          <template slot="op" slot-scope="props">
            <el-button type="text" @click="edit(props.obj.$index)">修改</el-button>
            <el-button type="text" @click="del(props.obj.row.id)">删除</el-button>
          </template>
        </i-table>
      </div>

      <!-- 新增司机 -->
    <el-dialog width="800px" :title="editId ? '修改司机信息' : '新增司机信息'" append-to-body :visible.sync="addDriverVisible">
      <add-driver @cancel="addDriverVisible = false" @confirm="confirm" :formData="formData"></add-driver>
    </el-dialog>


    </div>
</template>

<script>
import iTable from "@/components/table/table";
import { PageBean } from "@/utils/page-bean";
import {QueryCondition} from '@/utils/query-condition';
import AddDriver from '@/components/truck/addDriver.vue';
export default {
  components: { iTable,AddDriver },
  data() {
    return {
      // 表格配置
      tableConfig: {
        loading: false,
        hasSelect: false,
        hasIndex: true,
        hasOperation: false,
        hasSearch: true,
        hasPage: true,
        tr: [
          {
            label: "司机姓名",
            minWidth: "100",
            prop: "name",
          },
          {
            label: "性别",
            minWidth: "120",
            prop: "gender",
            show:"template"
          },
          {
            label: "司机电话",
            minWidth: "100",
            prop: "tel",
          },
          {
            label: "年龄",
            minWidth: "120",
            prop: "age",
          },
          {
            label: "驾龄",
            minWidth: "120",
            prop: "driveLicenseAge",
          },
          {
            label: "操作",
            minWidth: "120",
            prop: "op",
            show: "template",
          },
        ],
      },
      tableData: [],
      pageBean: new PageBean(10, 1, 0),
      searchInp:"",
      queryCondition: new QueryCondition(),
      addDriverVisible:false,
      editId:null,
      formData:null
    };
  },
  filters:{
    genderTxt(val){
      return val == 1 ? '男' : '女'
    }
  },
  created(){
    this.refreshTableData() 
  },
  methods: {
    //刷新表格数据
    refreshTableData(){
      this.tableConfig.loading = true;
      this.$api.driverList(Object.assign(this.queryCondition)).then(res => {
        this.tableData = res.records
        this.pageBean.Total = res.total;
        this.tableConfig.loading = false;
      }).catch(()=>{
        this.tableConfig.loading = false;
      })
    },
    //分页
    pageChange(pageBean) {
      this.queryCondition.current = pageBean.pageIndex;
      this.queryCondition.size = pageBean.pageSize;
      this.refreshTableData();
    },
    //搜索
    handSearch() {
      this.queryCondition.name = this.searchInp;
      this.queryCondition.current = 1;
      this.pageBean.pageIndex = 1;
      this.refreshTableData();
    },
    confirm(){
      this.addDriverVisible = false
      this.refreshTableData();
    },
    edit(index){
      this.formData = this.tableData[index]
      this.editId = this.formData.id
      this.addDriverVisible = true
    },
    addDriverBtn(){
      this.formData = null
      this.editId = null
      this.addDriverVisible = true
    },
    //删除
    del(id){
      this.$confirm('确认删除该司机？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.delDriver(id).then(res => {
          this.refreshTableData();
        })
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.table-box{
  padding:20px;
}
.topsearch{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .select{
    display: flex;
    align-items: center;
    label{
      font-size: 14px;
      color: #333;
      margin-right: 20px;
    }
  }
  .search-inp{
    width: 400px;
    margin-right: 20px;
  }
}
</style>